<script lang="ts" setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import type { ModuleLiveData } from '@/typings'
import { timeAbbreviation } from '@/utils/time'

const props = defineProps<{
    list: ModuleLiveData
}>()

const router = useRouter()

const goToLiveDetial = () => {
    router.push({
        name: 'livevideo',
        query: {
            list: JSON.stringify(props.list)
        }
    })
}
</script>

<template>
    <div @click="goToLiveDetial">
        <img :src="props.list.cover + '@480w_270h_1c'" alt="" class=" rounded-md" />
        <div style=" width: 100%;"
            class=" flex justify-between absolute bottom-0 left-0 text-white py-1 px-1.5 text-xs">
            <div class=" w-2/4 overflow-hidden whitespace-nowrap text-ellipsis">{{ props.list.uname }}</div>
            <div class=" flex items-center "><span class="iconfont icon-yanjing mr-1 text-xs"></span><span>{{
                    timeAbbreviation(props.list.watched_show.num)
            }}</span></div>
        </div>
    </div>
    <div>
        <p class="w-12/12 overflow-hidden text-ellipsis text-sm mt-1.5 text-black"
            style="-webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; width: 100%;">{{
                    props.list.title
            }}
        </p>
    </div>
</template>